<template>
    <div style="background-color:rgba(0,0,0,0.3);">
        <button type="primary" class="back" @click="clickBackMap" v-if="deepTree.length > 1">返回</button>
        <!-- 左边数据统计 -->
        <section class="mainbox">
            <!-- 中间数据统计 -->
            <div class="item center">
                <!-- 地图展示位置 -->
                <div class="map" style="position: relative">
                    <div class="chart chart_map" id="chart_map"></div>
                    <div class="map1"></div>
                    <div class="map2"></div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>

    import { getCityJSON, getDistrictsJSON, getProvinceJSON } from '../bigscreen/common/get-json'
    import { cityProvincesMap } from '../bigscreen/common/cityProvincesMap'
    import { mapOption } from '../bigscreen/common/mapOption'

    let timer = null
    export default {
        name: 'Brand',
        data() {
            return {
                chart: null, // 实例化echarts
                provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json
                provincesCode: cityProvincesMap.provincesCode, // 市行政区划，用于查找对应json
                areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据
                mapData: [], // 当前地图上的地区
                deepTree: [],// 点击地图时push，点返回时pop
                areaName: '贵州省', // 当前地名
                areaCode: '520000', // 当前行政区划
                areaLevel: 'province' // 当前级别
            }
        },
        mounted() {
            this.$nextTick(() => {
                let params = {
                    areaName: this.areaName,
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                this.requestGetProvinceJSON(params)
                this.chart.on('click', this.echartMapClick)
            })
        },
        methods: {
            initMap: function() {

            },
            // 加载省级地图
            requestGetProvinceJSON(params) {
                let res = getProvinceJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },
            // 加载市级地图
            requestGetCityJSON(params) {
                console.log('params == ', params)
                let res = getCityJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },
            // 加载区县级地图
            requestGetDistrictsJSON(params) {
                let res = getDistrictsJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },
            // 地图点击
            echartMapClick(params) {
                let info = params.data
                this.areaName = info.areaName
                this.areaLevel = info.areaLevel
                this.areaCode = info.areaCode
                // if (info.areaName in this.provincesMap) {
                //     this.areaCode = info.areaCode;
                //     this.areaLevel = info.areaLevel;
                //     //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
                //     this.requestGetProvinceJSON({areaName: info.areaName, areaCode: info.areaCode});
                // } else
                if (info.areaName in this.areaMap) {
                    //显示县级地图
                    this.requestGetCityJSON(info)
                } else {
                    this.requestGetDistrictsJSON(info)
                }
            },
            // 返回上一级地图页
            clickBackMap() {
                if (this.deepTree.length > 1) {
                    this.deepTree.pop()
                    let info = this.deepTree[this.deepTree.length - 1]
                    let params = info.params
                    this.areaName = params.areaName
                    this.areaLevel = params.areaLevel
                    this.areaCode = params.areaCode

                    let areaName = params.areaName
                    let data = info.mapData
                    let mapData = data.features
                    this.initEchantsMap(areaName, data, mapData)
                }
            },
            initEchantsMap(map, res, data = []) {
                if (this.chart) {
                    this.chart.clear()
                }
                //地图容器
                this.chart = this.$echarts.init(document.getElementById('chart_map'))
                this.$echarts.registerMap(map, res)

                let params = {
                    areaName: this.areaName,
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                // this.$emit('change', params)

                let list = []
                data.forEach((item, index) => {
                    let obj = {}
                    obj['properties'] = item['properties']
                    obj['name'] = item['properties']['name']
                    obj['areaName'] = item['properties']['name']
                    obj['areaCode'] = item['properties']['adcode']
                    obj['areaLevel'] = item['properties']['level']
                    obj['value'] = 0
                    list.push(obj)
                })
                let option = {
                    ...mapOption.basicOption,
                    series: [
                        {
                            name: map,
                            map: map,
                            ...mapOption.seriesOption,
                            data: list
                        }
                    ]

                }
                this.chart.setOption(option)
            }
        },
        beforeDestroy() {
            clearInterval(timer)
        }
    }
</script>

<style lang="less" scoped>
    .map {
        position: relative;
        width: 100vw;
        height: 54rem;
        background-size: cover;

        .chart {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            height: 10.125rem;
            width: 100%;
        }

        .map-style {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50em;
            height: 50em;
            background-size: 100% 100%;
            opacity: 0.3;
        }

        .map1 {
            .map-style;
        }

        .map2 {
            .map-style;
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url(~@assets/img/brand/jt.png);
            opacity: 0.6;
            -webkit-animation: rotate 15s linear infinite;
            animation: rotate 15s linear infinite;
            z-index: 2;
        }
    }

    @-webkit-keyframes rotate {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @keyframes rotate {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @-webkit-keyframes rotate1 {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }

    @keyframes rotate1 {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }

    @media screen and (max-width: 1024px) {
        html {
            font-size: 42px !important;
        }
    }

    @media screen and (min-width: 1920) {
        html {
            font-size: 80px !important;
        }
    }
</style>
